Applying Transitions to Pseudo-classes in CSS
Yes, you can apply transitions to an element’s pseudo-class such as :hover, :focus, or :active. In fact, transitions are most commonly used with these pseudo-classes to create smooth interactive effects when an element changes state.
The transition is declared on the base (default) state of the element, not inside the pseudo-class. This ensures the browser knows how to animate from the initial to the new state when the pseudo-class is triggered.
In this example, the button smoothly changes its background color and scales up slightly when hovered, thanks to the transition defined in the default state.
:hover— triggered when the user moves the mouse over an element.:focus— triggered when an element receives keyboard or programmatic focus.:active— triggered when an element is clicked or pressed.:checked— triggered when checkboxes or radio buttons are selected.
When the input field gains focus, its border color transitions smoothly from gray to blue.
Declare the
transitionon the base element, not the pseudo-class.Pseudo-classes like
:hover,:focus, and:activeare ideal for interactive transitions.You can transition multiple properties (like color, transform, or opacity) at once.